<!DOCTYPE HTML>
<html>
<head>
    <title>接口测试详情列表</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <link rel="stylesheet" href="${contextPath}/css/default.css" type="text/css"/>
    <link rel="stylesheet" href="${contextPath}/css/theme-chalk.css" type="text/css"/>
	<script src="${contextPath}/vue/vue.global.js"></script>
	<script src="${contextPath}/vue/index.full.js"></script>
	<script src="${contextPath}/vue/utils.js"></script>
</head>
<body>
<p class="heading">&nbsp;&nbsp;接口测试详情列表</p>
<table style="margin-left:0px;width: 99%" border="0" cellpadding="0" cellspacing="0" class="dataTable">
    <thead>
    <tr>
        <th width="70" align="center"><strong>序号</strong></th>
        <th align="center" style="padding: 0px 10px;width: 100px;"><strong>测试名称</strong></th>
        <th align="center" style="padding: 0px 10px;width: 100px;"><strong>开始时间</strong></th>
        <th align="center" style="padding: 0px 10px;width: 70px;"><strong>花费时间(毫秒)</strong></th>
        <th align="center" style="padding: 0px 10px;width: 65px;"><strong>发送流量</strong></th>
        <th align="center" style="padding: 0px 10px;width: 65px;"><strong>接收流量</strong></th>
        <th align="center" style="padding: 0px 10px;width: 65px;"><strong>响应成功</strong></th>
        <th align="center" style="padding: 0px 10px;width: 65px;"><strong>业务成功</strong></th>
        <th align="center" style="padding: 0px 10px;"><strong>请求数据</strong></th>
        <th align="center" style="padding: 0px 10px;"><strong>预期响应</strong></th>
        <th align="center" style="padding: 0px 10px;"><strong>响应数据</strong></th>
    </tr>
    </thead>
    <tbody>
    <#list callResults.records as callResult>
        <tr>
            <td height="23"
                style="text-align:center;width: 70px;">${(pageNo-1)*pageSize+callResult_index+1} </td>
            <td style="text-align:center">${callResult.testName!}</td>
            <td style="text-align:center">${callResult.beginTime}</td>
            <td style="text-align:center">${callResult.cost}</td>
            <td style="text-align:center">${callResult.sendSizeString}</td>
            <td style="text-align:center">${callResult.receiveSizeString}</td>
            <td style="text-align:center"><#if callResult.responseSuccess==true>是<#else>否</#if></td>
            <td style="text-align:center"><#if callResult.businessSuccess==true>是<#else>否</#if></td>
            <td style="text-align:left;min-width: 65px;max-width: 300px;">
                <div style="word-wrap: break-word;">${callResult.requestData!}</div>
            </td>
            <td style="text-align:left;min-width: 50px;max-width: 200px;">
                <div style="word-wrap: break-word;">${callResult.expectResponse!}</div>
            </td>
            <td style="text-align:left;min-width: 65px;max-width: 500px;">
                <div style="word-wrap: break-word;">${callResult.result!}</div>
            </td>
        </tr>
    </#list>
    </tbody>
</table>
<div id="app" style="text-align: right;margin-top: 20px;">
    <el-pagination background layout="prev, pager, next" :total="${callResults.total?c}"
                   @current-change="handleCurrentChange" :current-page="${pageNo}"
                   :page-size="${pageSize}"></el-pagination>
</div>
<br><br>

<script type="text/javascript">
    const App = {
        el: '#app',
        data: function () {
            return {};
        },
        methods: {
            handleCurrentChange(val) {
                let url = "${contextPath}/test/call-result?reportId=${reportId}&pageNo=";
                window.location.href = url + val
            }
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>
